<template>
  <div :id="'video' + index" @click="handleView" />
</template>
<script>
import PlayerManager from "@/components/VideoIcc/icc/PlayerManager";
export default {
  props: {
    /** rtsp地址 **/
    url: {
      type: String,
      default: "",
    },
    /** 通道id **/
    channelCode: {
      type: String,
      default: "0",
    },
    /** 下标 **/
    index: {
      type: [String, Number],
      default: "0",
    },
    /** 显示工具栏 **/
    showControl: {
      type: Boolean,
      default: false,
    },
    // 最大分屏数
    maxNum: {
      type: Number,
      default: 25,
    },
  },
  data() {
    return {
      realplayer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initializePlayer();
    });
  },
  methods: {
    // 初始化
    initializePlayer() {
      this.realplayer = new PlayerManager({
        el: "video" + this.index,
        type: "real" /** real - 实时预览  record - 录像回放 **/,
        maxNum: this.maxNum /** 能播放的路数，支持 1 4 9 16 25 **/,
        num: 1 /** 初始化，页面显示的路数 **/,
        showControl: this.showControl,
        prefixUrl: "static",
        showIcons: {
          streamChangeSelect: false, // 主辅码流切换
          talkIcon: false, // 对讲功能按钮
          localRecordIcon: false, // 录制视频功能按钮
          audioIcon: true, // 开启关闭声音按钮
          snapshotIcon: false, // 抓图按钮
          closeIcon: false, // 关闭视频按钮
        },
        openIvs: true, // 智能帧/规则线/目标框
        showRecordProgressBar: true, // 录像回放显示进度条
        useH265MSE: true, // true-表示硬解  false-软解 默认不传该字段
        receiveMessageFromWSPlayer: (methods, data, err) => {
          /* 回调函数监听 */
          switch (methods) {
            case "initializationCompleted":
              this.startReal();
              break;
            case "realSuccess": // 实时预览成功
              console.log("实时预览成功");
              break;
            case "realError": // 实时预览失败
              console.log("实时预览失败");
              break;
            case "talkError": // 对讲失败
              console.log("对讲失败");
              break;
            case "selectWindowChanged": // 选中的窗口发生改变
              console.log(data, "返回窗口信息");
              break;
            case "windowNumChanged": // 播放器显示的路数发生改变
              console.log(data, "返回显示的窗口数量");
              break;
            case "closeVideo": // 视频关闭回调
              // 点击关闭按钮引发的视频关闭进行提示
              // 切换视频引发的视频关闭不进行提示
              if (!data.changeVideoFlag) {
                console.log(`窗口${data.selectIndex}的视频已关闭`);
              }
              break;
            case "statusChanged": // 视频状态发生改变
              break;
            case "errorInfo": // 错误信息汇总
              console.log(data, "可打印查看错误消息");
          }
        },
      });
    },
    // 播放视频
    startReal() {
      if (!this.realplayer) {
        console.log("不能播放，请先初始化！！！！！");
        return;
      }
      let url = this.url ? this.url.split("/dss")[0] : this.url;
      let wsURL = url.replace("rtsp", "ws");
      this.realplayer.realByUrl({
        rtspURL: this.url,
        wsURL,
        selectIndex: 0,
        channelId: this.channelCode, //必传，通道id
        streamType: 1, // 1-主码流  2-辅码流
        playerAdapter: "stretching", // '窗口样式："selfAdaption" 自适应 | "stretching" 拉伸',
      });
    },
    // 点击视频
    handleView() {
      this.$emit("click", "video" + this.index);
    },
  },
};
</script>
